<template>
	<view class="store-detail-container">
		<!-- 导航栏 -->
		<nav-bar title="门店详情">
			<template #right>
				<view class="nav-right-action" @click="toggleFavorite">
					<u-icon :name="isFavorite ? 'star-fill' : 'star'" :color="isFavorite ? '#FF6600' : '#999'" size="24"></u-icon>
				</view>
			</template>
		</nav-bar>
		
		<!-- 页面内容 -->
		<view class="page-content has-nav-bar">
			<!-- 门店基本信息 -->
			<view class="store-header">
				<image :src="storeInfo.image || '/static/logo.png'" mode="aspectFill" class="store-image"></image>
				<view class="store-info">
					<view class="store-name">{{ storeInfo.name }}</view>
					<view class="store-status-row">
						<view class="store-status" :class="{ 'open': storeInfo.status === 1 }">
							{{ storeInfo.status === 1 ? '营业中' : '暂停营业' }}
						</view>
						<view class="store-distance" v-if="distance">
							<u-icon name="map-fill" color="#999" size="14"></u-icon>
							<text>{{ distance }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 门店详情信息 -->
			<view class="store-details">
				<view class="detail-item">
					<view class="item-icon">
						<u-icon name="clock" color="#5C4033" size="20"></u-icon>
					</view>
					<view class="item-content">
						<view class="item-label">营业时间</view>
						<view class="item-value">{{ storeInfo.businessHours || '暂无信息' }}</view>
					</view>
				</view>
				
				<view class="detail-item" @click="makePhoneCall">
					<view class="item-icon">
						<u-icon name="phone" color="#5C4033" size="20"></u-icon>
					</view>
					<view class="item-content">
						<view class="item-label">联系电话</view>
						<view class="item-value">{{ storeInfo.phone || '暂无信息' }}</view>
					</view>
					<view class="item-action">
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</view>
				
				<view class="detail-item" @click="openLocation">
					<view class="item-icon">
						<u-icon name="map" color="#5C4033" size="20"></u-icon>
					</view>
					<view class="item-content">
						<view class="item-label">门店地址</view>
						<view class="item-value">{{ storeInfo.address || '暂无信息' }}</view>
					</view>
					<view class="item-action">
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</view>
			</view>
			
			<!-- 门店地图 -->
			<view class="store-map-section">
				<view class="section-title">门店位置</view>
				<view class="location-address" v-if="storeInfo.address">
					<u-icon name="map-fill" color="#5C4033" size="20"></u-icon>
					<text>{{ storeInfo.province }} {{ storeInfo.city }} {{ storeInfo.address }}</text>
				</view>
				<view class="map-container">
					<!-- 高德地图容器 -->
					<view class="amap-container" id="amap-container" v-if="storeInfo.latitude && storeInfo.longitude">
						<!-- 地图加载中提示 -->
						<view class="map-loading" v-if="!mapLoaded">
							<u-loading-icon text="地图加载中..." size="18"></u-loading-icon>
						</view>
					</view>
					
					<!-- 小程序环境使用内置地图组件 -->
					<map 
						v-if="isMP && storeInfo.latitude && storeInfo.longitude"
						:latitude="storeInfo.latitude" 
						:longitude="storeInfo.longitude"
						:markers="markers"
						scale="16"
						class="map"
						@tap="openLocation"
					></map>
					
					<view v-if="!storeInfo.latitude || !storeInfo.longitude" class="no-location">
						<u-icon name="info-circle" color="#999" size="40"></u-icon>
						<text>暂无位置信息</text>
					</view>
				</view>
			</view>
			
			<!-- 门店服务 -->
			<view class="store-services-section">
				<view class="section-header">
					<view class="section-title">提供服务</view>
					<view class="section-more" @click="showAllServices" v-if="servicesList.length > 8 && !showAllServicesList">
						查看全部 <u-icon name="arrow-right" color="#999" size="14"></u-icon>
					</view>
				</view>
				<view class="services-list">
					<view class="service-item" v-for="(service, index) in displayedServices" :key="index">
						<view class="service-icon">
							<u-icon :name="getServiceIcon(service)" color="#5C4033" size="24"></u-icon>
						</view>
						<view class="service-name">{{ service }}</view>
					</view>
					<view class="no-services" v-if="!servicesList.length">
						<text>暂无服务信息</text>
					</view>
				</view>
			</view>
			
			<!-- 门店评价 -->
			<view class="store-rating-section">
				<view class="section-header">
					<view class="section-title">门店评价</view>
					<view class="section-more" @click="viewAllReviews">
						查看全部 <u-icon name="arrow-right" color="#999" size="14"></u-icon>
					</view>
				</view>
				<view class="rating-overview">
					<view class="rating-score">
						<text class="score">{{ storeRating.score || '4.8' }}</text>
						<view class="stars">
							<u-icon name="star-fill" color="#FF6600" size="16" v-for="i in 5" :key="i"></u-icon>
						</view>
					</view>
					<view class="rating-count">
						<text>{{ storeRating.count || '128' }}条评价</text>
					</view>
				</view>
				<view class="review-list" v-if="storeRating.reviews && storeRating.reviews.length">
					<view class="review-item" v-for="(review, index) in storeRating.reviews.slice(0, 2)" :key="index">
						<view class="review-header">
							<image :src="review.avatar || '/static/logo.png'" class="reviewer-avatar"></image>
							<view class="reviewer-info">
								<text class="reviewer-name">{{ review.username }}</text>
								<view class="review-stars">
									<u-icon name="star-fill" color="#FF6600" size="12" v-for="i in review.rating" :key="i"></u-icon>
								</view>
							</view>
							<text class="review-time">{{ review.time }}</text>
						</view>
						<view class="review-content">
							{{ review.content }}
						</view>
					</view>
				</view>
				<view class="no-reviews" v-else>
					<text>暂无评价</text>
				</view>
			</view>
			
			<!-- 门店描述 -->
			<view class="store-description-section">
				<view class="section-title">门店介绍</view>
				<view class="description-content" :class="{'expanded': showFullDescription}" @click="toggleDescription">
					{{ storeInfo.description || '暂无门店介绍' }}
				</view>
				<view class="expand-btn" v-if="storeInfo.description && storeInfo.description.length > 100 && !showFullDescription" @click="toggleDescription">
					查看更多 <u-icon name="arrow-down" color="#999" size="14"></u-icon>
				</view>
			</view>
			
			<!-- 底部操作区 -->
			<view class="footer-actions">
				<button class="action-btn call-btn" @click="makePhoneCall">
					<u-icon name="phone" color="#ffffff" size="20"></u-icon>
					<text>联系门店</text>
				</button>
				<button class="action-btn navigate-btn" @click="openLocation">
					<u-icon name="map" color="#ffffff" size="20"></u-icon>
					<text>导航前往</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import { storeApi } from '@/src/api/store.js';

export default {
	components: {
		NavBar
	},
	data() {
		return {
			storeId: '',
			storeInfo: {
				id: '',
				name: '加载中...',
				address: '',
				phone: '',
				businessHours: '',
				latitude: null,
				longitude: null,
				province: '',
				city: '',
				services: '',
				status: 1,
				image: '',
				description: ''
			},
			markers: [],
			map: null,
			mapLoaded: false,
			mapMarker: null,
			// 判断是否是小程序环境
			isMP: false,
			// 收藏状态
			isFavorite: false,
			// 距离信息
			distance: '',
			// 显示完整描述
			showFullDescription: false,
			// 显示所有服务
			showAllServicesList: false,
			// 门店评价数据
			storeRating: {
				score: '4.8',
				count: 128,
				reviews: [
					{
						username: '用户123456',
						avatar: '/static/logo.png',
						rating: 5,
						time: '2023-06-15',
						content: '店铺环境很好，服务态度也很好，宠物洗澡很干净，推荐！'
					},
					{
						username: '宠物爱好者',
						avatar: '/static/logo.png',
						rating: 4,
						time: '2023-06-10',
						content: '医疗服务专业，价格合理，就是等待时间有点长。'
					}
				]
			},
			// 模拟数据
			mockStoreInfo: {
				id: '1',
				name: '宠物星球旗舰店',
				address: '北京市海淀区中关村大街1号',
				phone: '010-12345678',
				businessHours: '09:00-21:00',
				latitude: 39.9087,
				longitude: 116.3975,
				province: '北京市',
				city: '海淀区',
				services: '宠物洗澡,宠物美容,宠物寄养,宠物医疗',
				status: 1,
				image: '/static/logo.png',
				description: '宠物星球旗舰店是一家集宠物销售、宠物美容、宠物医疗、宠物寄养于一体的综合性宠物服务门店。我们致力于为每一位宠物主人提供专业、贴心的服务，让您的爱宠健康、快乐地成长。'
			}
		};
	},
	computed: {
		servicesList() {
			if (!this.storeInfo.services) return [];
			return this.storeInfo.services.split(',');
		},
		displayedServices() {
			if (this.showAllServicesList) {
				return this.servicesList;
			}
			return this.servicesList.slice(0, 8);
		}
	},
	onLoad(options) {
		// 判断平台环境
		// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
		this.isMP = true;
		// #endif
		
		if (options.id) {
			this.storeId = options.id;
			this.getStoreDetail();
		} else {
			// 使用模拟数据
			this.useDefaultData();
		}
		
		// 检查是否已收藏
		this.checkFavorite();
		
		// 获取用户位置，计算距离
		this.getUserLocation();
	},
	
	onReady() {
		// 非小程序环境下初始化高德地图
		if (!this.isMP && this.storeInfo.latitude && this.storeInfo.longitude) {
			this.initAMap();
		}
	},
	methods: {
		// 获取门店详情
		getStoreDetail() {
			uni.showLoading({
				title: '加载中...'
			});
			
			storeApi.getStoreDetail(this.storeId)
				.then(res => {
					uni.hideLoading();
					if (res && res.code === 200 && res.data) {
						this.storeInfo = res.data;
						this.updateMarkers();
						
						// 非小程序环境下初始化高德地图
						if (!this.isMP && this.storeInfo.latitude && this.storeInfo.longitude) {
							this.$nextTick(() => {
								this.initAMap();
							});
						}
					} else {
						uni.showToast({
							title: res?.message || '获取门店信息失败',
							icon: 'none'
						});
						// 使用模拟数据
						this.useDefaultData();
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.error('获取门店详情失败:', err);
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
					// 使用模拟数据
					this.useDefaultData();
				});
		},
		
		// 使用默认模拟数据
		useDefaultData() {
			this.storeInfo = this.mockStoreInfo;
			this.updateMarkers();
			
			// 非小程序环境下初始化高德地图
			if (!this.isMP && this.storeInfo.latitude && this.storeInfo.longitude) {
				this.$nextTick(() => {
					this.initAMap();
				});
			}
		},
		
		// 更新地图标记
		updateMarkers() {
			if (this.storeInfo.latitude && this.storeInfo.longitude) {
				this.markers = [{
					id: 1,
					latitude: this.storeInfo.latitude,
					longitude: this.storeInfo.longitude,
					title: this.storeInfo.name,
					iconPath: '/static/location-pin.svg',
					width: 30,
					height: 30
				}];
				
				// 如果高德地图已初始化，更新地图中心点和标记
				if (this.map && this.mapMarker) {
					this.map.setCenter([this.storeInfo.longitude, this.storeInfo.latitude]);
					this.mapMarker.setPosition([this.storeInfo.longitude, this.storeInfo.latitude]);
				}
			}
		},
		
		// 初始化高德地图
		initAMap() {
			// #ifdef APP-PLUS || H5
			// 先设置安全密钥
			if (window._AMapSecurityConfig === undefined) {
				window._AMapSecurityConfig = {
					securityJsCode: '633caf9147a0684d1014072fd9f5d7f8'
				};
			}
			
			// 检查是否已经加载了高德地图API
			if (window.AMap) {
				this.initMapInstance();
				return;
			}
			
			// 动态加载高德地图JS API
			const script = document.createElement('script');
			script.type = 'text/javascript';
			script.async = true;
			script.src = 'https://webapi.amap.com/maps?v=2.0&key=7005147a2dba1e54ce7cb99d6b443352&callback=initAMap';
			document.head.appendChild(script);
			
			// 全局回调函数，在API加载完成后初始化地图
			window.initAMap = () => {
				this.initMapInstance();
			};
			// #endif
		},
		
		// 初始化地图实例
		initMapInstance() {
			// #ifdef APP-PLUS || H5
			if (!window.AMap) return;
			
			this.map = new AMap.Map('amap-container', {
				zoom: 16,
				center: [this.storeInfo.longitude, this.storeInfo.latitude]
			});
			
			// 添加标记点
			this.mapMarker = new AMap.Marker({
				position: [this.storeInfo.longitude, this.storeInfo.latitude],
				title: this.storeInfo.name
			});
			
			this.map.add(this.mapMarker);
			
			// 添加控件
			this.map.plugin(['AMap.ToolBar'], () => {
				this.map.addControl(new AMap.ToolBar({
					position: 'RB'
				}));
			});
			
			// 标记地图已加载
			this.mapLoaded = true;
			// #endif
		},
		
		// 打电话
		makePhoneCall() {
			if (!this.storeInfo.phone) {
				uni.showToast({
					title: '暂无联系电话',
					icon: 'none'
				});
				return;
			}
			
			uni.makePhoneCall({
				phoneNumber: this.storeInfo.phone,
				fail: () => {
					uni.showToast({
						title: '拨打电话失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 打开地图导航
		openLocation() {
			if (!this.storeInfo.latitude || !this.storeInfo.longitude) {
				uni.showToast({
					title: '暂无位置信息',
					icon: 'none'
				});
				return;
			}
			
			// #ifdef APP-PLUS || H5
			// 在H5或APP环境下，如果高德地图已加载，使用高德地图导航
			if (!this.isMP && window.AMap) {
				// 显示导航选项
				uni.showActionSheet({
					itemList: ['高德地图导航', '系统地图导航'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 使用高德地图导航
							this.openAmapNavigation();
						} else {
							// 使用系统地图导航
							this.openSystemNavigation();
						}
					}
				});
			} else {
				// 使用系统地图导航
				this.openSystemNavigation();
			}
			// #endif
			
			// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
			// 小程序环境使用内置导航
			this.openSystemNavigation();
			// #endif
		},
		
		// 使用系统地图导航
		openSystemNavigation() {
			uni.openLocation({
				latitude: this.storeInfo.latitude,
				longitude: this.storeInfo.longitude,
				name: this.storeInfo.name,
				address: this.storeInfo.address,
				fail: () => {
					uni.showToast({
						title: '打开地图失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 使用高德地图导航
		openAmapNavigation() {
			// #ifdef APP-PLUS || H5
			if (!window.AMap) {
				this.openSystemNavigation();
				return;
			}
			
			// 获取用户当前位置
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					// 使用高德地图导航插件
					window.AMap.plugin('AMap.Driving', () => {
						const driving = new AMap.Driving({
							map: this.map,
							panel: 'panel' // 使用默认的路线规划面板
						});
						
						// 规划导航路线
						driving.search(
							[res.longitude, res.latitude], 
							[this.storeInfo.longitude, this.storeInfo.latitude],
							(status, result) => {
								if (status === 'complete') {
									// 导航成功
									uni.showToast({
										title: '规划路线成功',
										icon: 'success'
									});
								} else {
									// 导航失败，降级使用系统导航
									uni.showToast({
										title: '导航失败，将使用系统导航',
										icon: 'none'
									});
									this.openSystemNavigation();
								}
							}
						);
					});
				},
				fail: () => {
					uni.showToast({
						title: '获取位置失败，将使用系统导航',
						icon: 'none'
					});
					this.openSystemNavigation();
				}
			});
			// #endif
		},
		
		// 根据服务类型获取图标
		getServiceIcon(service) {
			const iconMap = {
				'宠物洗澡': 'wash-hand',
				'宠物美容': 'heart',
				'宠物寄养': 'home',
				'宠物医疗': 'plus',
				'宠物训练': 'star',
				'宠物用品': 'shopping-cart'
			};
			
			return iconMap[service] || 'checkmark';
		},
		
		// 检查是否已收藏
		checkFavorite() {
			const favoriteStores = uni.getStorageSync('favoriteStores') || [];
			const storeId = Number(this.storeId);
			this.isFavorite = favoriteStores.includes(storeId);
		},
		
		// 切换收藏状态
		toggleFavorite() {
			let favoriteStores = uni.getStorageSync('favoriteStores') || [];
			const storeId = Number(this.storeId);
			
			if (this.isFavorite) {
				// 取消收藏
				favoriteStores = favoriteStores.filter(id => id !== storeId);
				uni.showToast({
					title: '已取消收藏',
					icon: 'success'
				});
			} else {
				// 添加收藏
				if (!favoriteStores.includes(storeId)) {
					favoriteStores.push(storeId);
				}
				uni.showToast({
					title: '收藏成功',
					icon: 'success'
				});
			}
			
			// 更新本地存储
			uni.setStorageSync('favoriteStores', favoriteStores);
			this.isFavorite = !this.isFavorite;
		},
		
		// 获取用户位置并计算距离
		getUserLocation() {
			if (!this.storeInfo.latitude || !this.storeInfo.longitude) return;
			
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					// 计算距离
					const distance = this.calculateDistance(
						res.latitude, 
						res.longitude, 
						this.storeInfo.latitude, 
						this.storeInfo.longitude
					);
					
					// 格式化距离显示
					if (distance < 1) {
						this.distance = (distance * 1000).toFixed(0) + 'm';
					} else {
						this.distance = distance.toFixed(1) + 'km';
					}
				},
				fail: () => {
					console.log('获取位置失败');
				}
			});
		},
		
		// 计算两点之间的距离（km）
		calculateDistance(lat1, lon1, lat2, lon2) {
			const R = 6371; // 地球半径，单位km
			const dLat = this.deg2rad(lat2 - lat1);
			const dLon = this.deg2rad(lon2 - lon1);
			const a = 
				Math.sin(dLat/2) * Math.sin(dLat/2) +
				Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) * 
				Math.sin(dLon/2) * Math.sin(dLon/2); 
			const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
			const distance = R * c; // 距离，单位km
			return distance;
		},
		
		// 角度转弧度
		deg2rad(deg) {
			return deg * (Math.PI/180);
		},
		
		// 显示所有服务
		showAllServices() {
			this.showAllServicesList = true;
		},
		
		// 切换描述展开/折叠状态
		toggleDescription() {
			this.showFullDescription = !this.showFullDescription;
		},
		
		// 查看所有评价
		viewAllReviews() {
			uni.showToast({
				title: '评价功能即将上线',
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss">
.store-detail-container {
	background-color: #f8f8f8;
	min-height: 100vh;
	
	.nav-right-action {
		padding: 0 20rpx;
	}
	
	.store-header {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		
		.store-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		
		.store-info {
			flex: 1;
			
			.store-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.store-status-row {
				display: flex;
				align-items: center;
				
				.store-status {
					display: inline-block;
					padding: 4rpx 12rpx;
					background-color: #f2f2f2;
					color: #999;
					font-size: 24rpx;
					border-radius: 6rpx;
					margin-right: 15rpx;
					
					&.open {
						background-color: #e6f7e6;
						color: #52c41a;
					}
				}
				
				.store-distance {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					
					text {
						margin-left: 4rpx;
					}
				}
			}
		}
	}
	
	.store-details {
		background-color: #fff;
		margin-top: 20rpx;
		
		.detail-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1px solid #f2f2f2;
			
			&:last-child {
				border-bottom: none;
			}
			
			.item-icon {
				margin-right: 20rpx;
			}
			
			.item-content {
				flex: 1;
				
				.item-label {
					font-size: 28rpx;
					color: #999;
					margin-bottom: 4rpx;
				}
				
				.item-value {
					font-size: 30rpx;
					color: #333;
				}
			}
			
			.item-action {
				margin-left: 10rpx;
			}
		}
	}
	
	.store-map-section,
	.store-services-section,
	.store-description-section,
	.store-rating-section {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
		
		.location-address {
			display: flex;
			align-items: center;
			padding: 15rpx 0 25rpx;
			
			text {
				margin-left: 10rpx;
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
			}
		}
		
		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.section-more {
				font-size: 26rpx;
				color: #999;
				display: flex;
				align-items: center;
			}
		}
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			position: relative;
			padding-left: 20rpx;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 30rpx;
				background-color: #5C4033;
				border-radius: 3rpx;
			}
		}
	}
	
	.map-container {
		height: 400rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		
		.map {
			width: 100%;
			height: 100%;
		}
		
		.amap-container {
			width: 100%;
			height: 100%;
			position: relative;
		}
		
		.map-loading {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.8);
			z-index: 10;
		}
		
		.no-location {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #f2f2f2;
			
			text {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999;
			}
		}
		
		// 高德地图导航面板样式
		#panel {
			position: absolute;
			top: 0;
			right: 0;
			width: 280px;
			height: 100%;
			overflow-y: auto;
			background-color: white;
			z-index: 999;
			border-left: 1px solid #ccc;
		}
	}
	
	.services-list {
		display: flex;
		flex-wrap: wrap;
		
		.service-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			
			.service-icon {
				margin-bottom: 10rpx;
			}
			
			.service-name {
				font-size: 24rpx;
				color: #666;
				text-align: center;
			}
		}
		
		.no-services {
			width: 100%;
			padding: 40rpx 0;
			text-align: center;
			color: #999;
			font-size: 28rpx;
		}
	}
	
	.description-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		max-height: 200rpx;
		overflow: hidden;
		
		&.expanded {
			max-height: none;
		}
	}
	
	.expand-btn {
		text-align: center;
		margin-top: 20rpx;
		color: #5C4033;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.rating-overview {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		
		.rating-score {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 40rpx;
			
			.score {
				font-size: 48rpx;
				color: #FF6600;
				font-weight: bold;
				line-height: 1;
				margin-bottom: 10rpx;
			}
			
			.stars {
				display: flex;
			}
		}
		
		.rating-count {
			font-size: 26rpx;
			color: #999;
		}
	}
	
	.review-list {
		.review-item {
			padding: 20rpx 0;
			border-bottom: 1px solid #f2f2f2;
			
			&:last-child {
				border-bottom: none;
			}
			
			.review-header {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				
				.reviewer-avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				
				.reviewer-info {
					flex: 1;
					
					.reviewer-name {
						font-size: 26rpx;
						color: #333;
						margin-bottom: 5rpx;
					}
					
					.review-stars {
						display: flex;
					}
				}
				
				.review-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.review-content {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
			}
		}
	}
	
	.no-reviews {
		padding: 40rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
	
	.footer-actions {
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.action-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;
			margin: 0 10rpx;
			border: none;
			
			&.call-btn {
				background-color: #5C4033;
			}
			
			&.navigate-btn {
				background-color: #FF6600;
			}
			
			text {
				margin-left: 10rpx;
			}
		}
	}
	
	.page-content {
		padding-bottom: 120rpx;
		
		&.has-nav-bar {
			padding-top: 90rpx;
		}
	}
}
</style> 